<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="scroll-list msg-list-item" scroll-y="true">
			<view class="msg-time">2024年7月22日 22:01</view>
			<uni-card class="msg-card" margin="5rpx 40rpx 50rpx 40rpx" @click="navTo('/pages/sys/msg/notice-item')">
				<template v-slot="cover" :is-shadow="true">
					<view class="custom-cover">
						<image class="cover-image" src="/static/ulla/notice/dashu.webp" mode="aspectFill"></image>
					</view>
					<text class="uni-card__cover-text">今日，大暑</text>
				</template>
			</uni-card>
			
			<view class="msg-time">2024年7月06日 20:05</view>
			<uni-card class="msg-card" margin="5rpx 40rpx 50rpx 40rpx" @click="navTo('/pages/sys/msg/notice-item')">
				<template v-slot="cover" :is-shadow="true">
					<view class="custom-cover">
						<image class="cover-image" src="/static/ulla/notice/xiaoshu.webp" mode="aspectFill"></image>
					</view>
					<text class="uni-card__cover-text">今日，小暑</text>
				</template>
			</uni-card>
			
			<view class="msg-time">2024年6月25日 11:05</view>
			<uni-card class="msg-card" margin="5rpx 40rpx 50rpx 40rpx" @click="navTo('/pages/sys/msg/notice-item')">
				<template v-slot="cover" :is-shadow="true">
					<view class="custom-cover">
						<image class="cover-image" src="/static/ulla/notice/shujia.webp" mode="aspectFill"></image>
					</view>
					<text class="uni-card__cover-text">关于暑期放假的通知</text>
				</template>
			</uni-card>						
			<u-divider>已经到底了</u-divider>
		</scroll-view>
	</view>
</template>

<script>
import uniCard from '@/components/uni-card/uni-card.vue';	

export default {
	components: {
		uniCard
	},
	data() {
		return {
			keywords: '',
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#4f77ed',
				buttonColor: '#4f77ed',
				iconColor: '#fff'
			},
			content: [{
				iconPath: '/static/icon/notice.svg',
				selectedIconPath: '/static/icon/notice-select.svg',
				text: '发布通知',
				active: false
			}],
			horizontal: 'left',
			vertical: 'bottom',
			direction: 'horizontal',
		};
	},
	onLoad() {
		
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		search(value) {
			this.$u.toast('搜索内容为：' + value)
		},
		trigger(e) {
			console.log(e)
			uni.navigateTo({
				url: "/pages/sys/msg/notice-publish"
			});
			this.content[e.index].active = !e.item.active
			// uni.showModal({
			// 	title: '提示',
			// 	content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
			// 	success: function(res) {
			// 		if (res.confirm) {
			// 			console.log('用户点击确定')
			// 		} else if (res.cancel) {
			// 			console.log('用户点击取消')
			// 		}
			// 	}
			// })
		},
		fabClick() {
			// uni.showToast({
			// 	title: '点击了悬浮按钮',
			// 	icon: 'none'
			// })
		},
	}
};
</script>

<style lang="scss">
@import '../../../common/uni.css';
page {
	background-color: #f5f5f5;
}

.wrap .search{
	background: #ffffff;
}

.msg-time{
	font-size: 26rpx;
	padding: 10px 0;
	color: #999999;
	text-align: center;
}

.msg-card {
	margin: 15rpx 25rpx 100rpx 100rpx;
}

.u-card__foot{
	.u-icon{
		margin-right: 10px;
	}
}

.custom-cover {
	flex: 1;
	flex-direction: row;
	position: relative;
	margin: 12rpx 0;

	.cover-image {
		flex: 1;
		height: 135px;
		width: 100%;
		border-radius: 8rpx;
	}
}

.msg-card {
	border-radius: 15rpx;
}

.uni-card__cover-text {
	font-size: 14px;
	font-weight: 700;
	line-height: 10px;
	overflow: hidden;
	white-space: nowrap;
    text-overflow: ellipsis;
	color: #333;
	margin-left: 5px;
}

.uni-card {
	line-height: 12px;
}
</style>
